$(function () {

  download();
  cartHover();
  loadCarData();
  checkFun();
  changeCars();

  //加载已经加入购物车的商品 goodsCarList.json goodsList.json ajax没法同时加载两个路径的数据
  function loadCarData() {
    //每次添加数据之前把cookie里的数据清空
    $('#J_cartListBody .item-box').html("");

    new Promise(function (resolve, reject) {
      $.ajax({
        url: './assets/data/goodsCarList.json',
        success: function (obj) {
          resolve(obj.data);
        },
        error: function (msg) {
          reject(msg);
        }
      })
    }).then(function (arr1) {
      //下载第二份数据
      return new Promise(function (resolve, reject) {
        $.ajax({
          url: './assets/data/goodsList2.json',
          success: function (arr2) {
            //将arr1和arr2合并
            var newArr = arr1.concat(arr2);
            resolve(newArr);

          },
          error: function (msg) {
            reject(msg);
          }
        })
      })
    }).then(function (arr) {
      //arr 所有商品的信息
      var cookieStr = $.cookie("goods");
      if (cookieStr) {
        var cookieArr = JSON.parse(cookieStr);
        var newArr = [];

        for (var i = 0; i < cookieArr.length; i++) {
          for (var j = 0; j < arr.length; j++) {
            if (cookieArr[i].id == arr[j].product_id || cookieArr[i].id == arr[j].goodsid) {
              arr[j].num = cookieArr[i].num;
              //设置商品的id
              arr[j].id = arr[j].product_id ? arr[j].product_id : arr[j].goodsid;
              newArr.push(arr[j]);
            }
          }
        }
        
        //将cookie商品渲染到页面上
        for (var i = 0; i < newArr.length; i++) {
          $(`<div class="item-table J_cartGoods"
              data-info="{ commodity_id:'1192300048', gettype:'buy', itemid:'2192300031_0_buy', num:'1'} ">
              <div class="item-row clearfix" id="${newArr[i].id}">
                  <div class="col col-check">
                      <i class="iconfont icon-checkbox icon-checkbox-selected J_itemCheckbox"
                          data-itemid="2192300031_0_buy" data-status="1">√</i>
                  </div>
                  <div class="col col-img">
                      <a href="//item.mi.com/${newArr[i].id}.html" target="_blank">
                          <img alt=""
                              src="${newArr[i].image}"
                              width="80" height="80">
                      </a>
                  </div>
                  <div class="col col-name">
                      <div class="tags">
                      </div>
                      <div class="tags">
                      </div>
                      <h3 class="name">
                          <a href="//item.mi.com/${newArr[i].id}.html" target="_blank">
                          ${newArr[i].name}
                          </a>
                      </h3>
                  </div>
                  <div class="col col-price">
                  ${newArr[i].price}元
                      <p class="pre-info"> </p>
                  </div>
                  <div class="col col-num">
                      <div class="change-goods-num clearfix J_changeGoodsNum">
                          <a href="javascript:void(0)" class="J_minus">
                              <i class="iconfont"></i>
                          </a>
                          <input tyep="text" name="2192300031_0_buy" value="${newArr[i].num}" data-num="1"
                              data-buylimit="20" autocomplete="off" class="goods-num J_goodsNum" > 
                                          <a href=" javascript:void(0)" class="J_plus"><i
                              class="iconfont"></i></a>
                      </div>
                  </div>
                  <div class="col col-total">
                  ${(newArr[i].price * newArr[i].num).toFixed(1)}元
                      <p class="pre-info"> </p>
                  </div>
                  <div class="col col-action">
                      <a id="${newArr[i].id}" data-msg="确定删除吗？" href="javascript:void(0);" title="删除"
                          class="del J_delGoods"><i class="iconfont"></i></a>
                  </div>
              </div>
          </div>`).appendTo('#J_cartListBody .item-box');
        }
        isCheckAll();
      }
    })

  }

  function download() {
    console.log(11)
    $.ajax({
      type: 'get',
      url: '../assets/data/goodsCarList.json',
      success: function (result) {
        var arr = result.data;
        for (var i = 0; i < arr.length; i++) {
          $(`<li class="J_xm-recommend-list span4">
          <dl>
              <dt>
                  <a href="#">
                      <img src="${arr[i].image}"
                          alt="${arr[i].name}">
                  </a>
              </dt>
              <dd class="xm-recommend-name">
                  <a href="#">
                      ${arr[i].name}
                  </a>
              </dd>
              <dd class="xm-recommend-price">${arr[i].price}元</dd>
              <dd class="xm-recommend-tips"> ${arr[i].comments}人好评
                  <a href="#" class="btn btn-small btn-small btn-line-primary J_xm-recommend-btn"style="display: none;" id="${arr[i].goodsid}">加入购物车</a>
              </dd>
              <dd class="xm-recommend-notice">

              </dd>
          </dl>
      </li>`).appendTo("#J_miRecommendBox .xm-recommend ul");
        }
      },
      error: function (msg) {
        alert(msg);
      }
    })
  }

  //鼠标移入出现加入购物车
  function cartHover() {
    $("#J_miRecommendBox .xm-recommend ul").on("mouseenter", ".J_xm-recommend-list", function () {
      $(this).find(".xm-recommend-tips a").css("display", "block");
    })
    $("#J_miRecommendBox .xm-recommend ul").on("mouseleave", ".J_xm-recommend-list", function () {
      $(this).find(".xm-recommend-tips a").css("display", "none");
    })

    //通过事件委托，添加购物车
    $("#J_miRecommendBox .xm-recommend ul").on("click", ".xm-recommend-tips a", function () {
      var id = this.id;
      var frist = $.cookie("goods") == null ? true : false;
      //如果是第一次添加
      if (frist) {
        var cookieArr = [{ id: id, num: 1 }];
        $.cookie("goods", JSON.stringify(cookieArr), {
          expires: 7
        })
      } else {
        var same = false; //假设之前没有添加过
        var cookieStr = $.cookie("goods"); //取出cookie里的数据
        var cookieArr = JSON.parse(cookieStr);
        for (var i = 0; i < cookieArr.length; i++) {
          if (cookieArr[i].id == id) {
            ///说明之前添加过
            cookieArr[i].num++;
            same = true;
            break;
          }
        }
        if (!same) {
          var obj = { id: id, num: 1 };
          cookieArr.push(obj);
        }
        //最后将数据存储在cookie里
        $.cookie("goods", JSON.stringify(cookieArr), {
          expires: 7
        })
      }
      loadCarData();
      // alert($.cookie("goods"));
      isCheckAll();
      return false;//阻止a标签的默认行为
    })
  }
  //全选按钮和单选添加点击
  function checkFun() {
    //全选
    $("#J_selectAll").click(function () {
      //获取所有单选框
      var allChecks = $('#J_cartListBody').find(".item-row .col-check i");
      $(this).hasClass("icon-checkbox-selected")
      if ($(this).hasClass("icon-checkbox-selected")) {
        $(this).add(allChecks).removeClass("icon-checkbox-selected")
      } else {
        $(this).add(allChecks).addClass("icon-checkbox-selected")
      }
      isCheckAll();
    })

    //给每一个商品的复选框添加点击事件
    $('#J_cartListBody').on("click", ".item-row .col-check i", function () {
      if ($(this).hasClass("icon-checkbox-selected")) {
        $(this).removeClass("icon-checkbox-selected")
      } else {
        $(this).addClass("icon-checkbox-selected")
      }
      isCheckAll();
    })
  }

  //判断有多少个被选中
  function isCheckAll() {
    var allChecks = $('#J_cartListBody').find(".item-row");
    var isAll = true; //假设是否都被选中
    var total = 0; //计算总数
    var count = 0; //记录被选中的数量
    var totalCount = 0; //记录总数
    allChecks.each(function (index, item) {
      if (!$(item).find(".col-check i").hasClass("icon-checkbox-selected")) {
        //判断这个商品没被选中
        isAll = false;
      } else {
        total += parseFloat($(item).find('.col-price').html().trim()) * parseFloat($(this).find('.col-num input').val().trim());
        
        // console.log(total);
        //被选中的商品的数量
        count += parseInt($(this).find(".col-num input").val())

      }
      //计算所有加购物车的商品一共有几件
      totalCount += parseInt($(this).find(".col-num input").val());

    })
    total=total.toFixed(2);
    $('#J_cartTotalNum').html(totalCount);
    $('#J_selTotalNum').html(count);
    $('#J_cartTotalPrice').html(total);

    //判断是否全选
    if (isAll) {
      $('#J_cartBox .list-head .col-check').find('i').addClass("icon-checkbox-selected");
    } else {
      $('#J_cartBox .list-head .col-check').find('i').removeClass("icon-checkbox-selected");
    }
  }

  //封装删除操作
  function changeCars() {
    $('#J_cartListBody .item-box').on("click", ".J_cartGoods .col-action a", function () {
      var e = $(this);

      //在cookie中删除
      var cookieStr = $.cookie("goods");
      var cookieArr = JSON.parse(cookieStr);
      layer.confirm("您确定删除吗", {
        btn: ['确定', '取消'] //按钮
      }, function () {

        var id = e.parents(".item-row").remove().attr("id");

        for (var i = 0; i < cookieArr.length; i++) {
          if (cookieArr[i].id == id) {
            cookieArr.splice(i, 1);
            break;
          }
        }
        cookieArr.length == 0 ? $.cookie("goods", null) : $.cookie("goods", JSON.stringify(cookieArr), { expires: 7 });

        layer.msg('删除成功');
        isCheckAll();
        return false;

      });
    })

    //给每一个+和-添加事件
    $('#J_cartListBody .item-box').on("click", ".J_minus,.J_plus", function(){
      var id = $(this).parents(".item-row").attr("id");
      var cookieStr = $.cookie("goods");
      var cookieArr = JSON.parse(cookieStr);

      for(var i=0;i<cookieArr.length;i++){
        if(cookieArr[i].id == id){
          if(this.className=="J_minus"){
             //数量减一
             cookieArr[i].num == 1?layer.alert("数量已经为1，不能再减少"):cookieArr[i].num --;
          }else{
            cookieArr[i].num >=20?layer.alert("数量不能大于20"):cookieArr[i].num++;
          }
          
          break;
        }
        
      }
      //更新页面的商品
      $(this).siblings("input").val(cookieArr[i].num);
      //更新页面的价格
      var price=parseFloat( $(this).parents(".col-num").siblings(".col-price").html().trim());
      $(this).parents(".col-num").siblings(".col-total").html((price * cookieArr[i].num).toFixed(1)+"元");

      //最后更改保存到cookie里的数据
      $.cookie("goods",JSON.stringify(cookieArr),{
        expires:7
      })
      isCheckAll();
      return false;
    });

    //添加修改input值事件
    $('#J_cartListBody .item-box').on("change",".col-num input",function(){
      var id = $(this).parents(".item-row").attr("id");
      var cookieStr = $.cookie("goods");
      var cookieArr = JSON.parse(cookieStr);

      for(var i=0;i<cookieArr.length;i++){
        if(cookieArr[i].id==id){
          if($(this).val() <=0){
            layer.alert("商品数量不能小于1");
            cookieArr[i].num =$(this).val(1);
          } 
          if($(this).val() >20){
            layer.alert("该商品数量不能大于20");
            cookieArr[i].num =$(this).val(20);
          } 
          cookieArr[i].num =$(this).val();
          break;
        }
      }
      //更改页面的价格
      var price=parseFloat($(this).parents(".col-num").siblings(".col-price").html().trim());
      $(this).parents(".col-num").siblings(".col-total").html((price * cookieArr[i].num).toFixed(2)+"元");

      //最后更改保存到cookie里的数据
      $.cookie("goods",JSON.stringify(cookieArr),{
        expires:7
      })
      isCheckAll();

    })
  }
})
//class="btn btn-small btn-small btn-line-primary J_xm-recommend-btn"